<template>
  <div>
    <!-- 文章列表 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="finished">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onload"
        offset="50"
        :immediate-check="false"
      >
        <article-item
          v-for="item in articleList"
          :key="item.art_id"
          :title="item.title"
          :author="item.aut_name"
          :count="item.comm_count"
          :time="item.pubdate"
          :img="item.cover"
          :id="item.art_id"
          @delArticle="delArticleFn"
          @reportArticle="reportArticleFn"
          @click.native="$router.push({ path: `/art_detail/${item.art_id}` })"
        ></article-item>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from '@/components/Articleitem.vue'
import { getArticleListAPI } from '@/api/home.js'
import { Toast } from 'vant'
import { MY } from '@/utile/Notifiy.js'
import { postDislikeAPI, reportArticleAPI } from '@/api/article.js'

export default {
  name: 'ArticleList',
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      articleList: [],
      loading: false,
      finished: false,
      nextTime: null,
      isLoading: false
    }
  },
  components: {
    ArticleItem
  },
  async created() {
    /*   const res = await getArticleListAPI({ channel_id: this.id })
    this.articleList = res.data.data.results
    console.log(res.data.data.results)
    const pre_timestamp = res.data.data.pre_timestamp
    this.nextTime = pre_timestamp */
    this.getMoreArticle()
  },
  methods: {
    onload() {
      this.getMoreArticle()
    },
    async getMoreArticle() {
      const res = await getArticleListAPI({ channel_id: this.id, timestamp: this.nextTime })

      if (res.data.data.pre_timestamp === null || res.data.data.results.length < 10 || res.data.data.length === 0) {
        this.finished = true // 告诉list组件直接底部显示没有更多数据
        return
      }
      this.nextTime = res.data.data.pre_timestamp // 保存下一页数据的时间(做分页用)
      this.articleList = [...this.articleList, ...res.data.data.results]
      // 等待网络请求结果后
      this.loading = false // 底部加载更多状态
    },
    async onRefresh() {
      const res = await getArticleListAPI({ channel_id: this.id, timestamp: this.nextTime })
      console.log(res)
      if (res.data.data.pre_timestamp === null || res.data.data.results.length < 10) {
        // 告诉list组件直接底部显示没有更多数据
        Toast('一滴都没有了！')
        this.isLoading = false
        return
      }
      this.nextTime = res.data.data.pre_timestamp // 保存下一页数据的时间(做分页用)
      this.articleList = [...res.data.data.results, ...this.articleList]
      this.isLoading = false
    },
    async delArticleFn(val) {
      console.log(val)
      try {
        await postDislikeAPI({
          target: val
        })
        MY({ type: 'success', message: '反馈成功' })
      } catch (err) {
        MY({ type: 'warning', message: '反馈失败-联系程序员' })
        console.log(err)
      }
      const index = this.articleList.findIndex(item => item.art_id === val)

      console.log(index)
      if (index !== 1) {
        this.articleList.splice(index, 1)
      }
    },
    async reportArticleFn(target, type) {
      try {
        /*  if (type === 0) {
          await reportArticleAPI({ target, type })
        } */
        await reportArticleAPI({ target, type })
        MY('举报成功！')
      } catch (e) {
        console.log(e)
        MY('举报失败！')
      }
    }
  }
}
</script>
